<template>
  <header class="todo-header">
    <h1>TodoList</h1>
    <div class="add-todo">
      <input
        type="text"
        placeholder="请输入待办事项..."
        v-model="todoContent"
        @keyup.enter="addTodo"
      />
      <button @click="addTodo">添加</button>
    </div>
  </header>
</template>

<script setup>
import { ref } from 'vue'
import { v4 as uuidv4 } from 'uuid'

// 定义输出事件
const emit = defineEmits(['add-todo'])

// 定义输入框内容
const todoContent = ref('')

// 添加Todo的方法
const addTodo = () => {
  // 验证输入不为空
  if (todoContent.value.trim() === '') {
    alert('待办事项不能为空！')
    return
  }

  // 创建todo对象
  const todo = {
    id: uuidv4(),
    content: todoContent.value.trim(),
    done: false,
  }

  // 发送添加事件
  emit('add-todo', todo)

  // 清空输入框
  todoContent.value = ''
}
</script>

<style scoped>
.todo-header {
  padding: 5px 0 10px;
  background-color: #221ca1;
  color: #f0f8ff;
  text-align: center;
}
.todo-header h1 {
  font-size: 24px;
}
.todo-header .add-todo {
  margin-top: 10px;
  display: flex;
  gap: 5px;
  justify-content: center;
}
.todo-header .add-todo input {
  width: 300px;
  height: 30px;
  padding: 0 10px;
  border-radius: 3px;
  outline: none;
  border: solid 1px white;
}
.todo-header .add-todo button {
  display: inline-block;
  width: 80px;
  background-color: #eee;
  color: #0b87ff;
  line-height: 30px;
  border: none;
  border-radius: 3px;
}
.todo-header .add-todo button:hover {
  cursor: pointer;
  background-color: #fff;
  color: #ff6700;
}
.todo-list li {
  display: flex;
  align-items: center;
  height: 40px;
  padding: 0 40px;
  list-style: none;
  border-bottom: 1px solid #eee;
}
.todo-list li:hover {
  background-color: #ddd;
}
.todo-list li span {
  flex: 1;
  margin-left: 20px;
}
.todo-list li button {
  padding: 0 10px;
}
.todo-footer {
  display: flex;
  margin-top: 20px;
  padding: 10px 40px;
  background-color: #187326;
}
.todo-footer div {
  flex: 1;
  margin-left: 20px;
}
.todo-footer button {
  margin-left: 10px;
  padding: 0 10px;
}
</style>
